<template>
	<view style="background-color: #eeeeee;">
		<view class="status_bar" style="background-color: #fff;color: #000;">
			<!-- 这里是状态栏 -->
		</view>
		<view class="uni-page-head" style="background-color: rgb(255,255,255);">
			<image class="controls-play img" @click="play" style="width: 58.5rpx;height: 58.5rpx;" mode="aspectFit"
				src="/static/images/icons/menu.png"></image>
			<view style="display: inline-block; flex: 1;text-align: center;"></view>
			<view style="display: flex;align-items: center;justify-content: flex-end;height: 100%;">
				<image class="controls-play img" @click="play" style="width: 58.5rpx;height: 58.5rpx;" mode="aspectFit"
					src="/static/images/icons/add.png"></image>
			</view>
		</view>

	</view>
	<view class="index-content">
		<view style="width: 100%;padding: 0 0 0 12px;display: flex;justify-content: space-between;align-items: center;">
			<view class="cus-tabs" style="flex: 1;">
				<view v-for="(item, i) in ['My Devices', 'Home', 'Shop']" class="cus-tab" :class="{curr: currTabIndex === i}" @tap="tabClick(i)">{{item}}</view>
			</view>
			<image src="/static/images/icons/arrow-down.png" style="width: 58.5rpx;height:58.5rpx;" mode="aspectFill">
			</image>
		</view>
		<scroll-view scroll-y="true" class="list-items">
				
			
			
			<view class="list-item" v-for="(i, ii) in 20" :key="ii">
				<image src="/static/images/list-image-demo.png" class="list-item-img" mode="aspectFill" @tap="play"></image>
				<view class="time-now">2024-06-24 15:08:301</view>
				<view class="item-bottom">
					<image src="/static/images/icons/living-room.png" mode="aspectFit" class="list-b-icon"></image>
					<view class="room-name" style="margin-left: 48.5rpx;">living room</view>
					<view style="position: absolute; bottom: 29.79rpx; right: 28.5rpx;">
						<next-bubble-menu :d-width="200" :dataList="dataList" :bingEleId="'popup-'+ii" @change="popupHandle">
							<view><image src="/static/images/icons/more-v.png" mode="aspectFit" style="width: 58.5rpx;height:58.5rpx;"></image></view>
						</next-bubble-menu>
					</view>
					
				</view>
				<view class="list-item-mask" v-if="ii === 2">
					<image src="/static/images/icons/disconnect.png" mode="aspectFit" style="width: 58.5rpx;height:58.5rpx;"></image>
					<view class="time-disconnect">Offline time：2024-06-24 15:08:31</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const currTabIndex = ref(0)
	const isShow = ref(false)
	const tabClick = (index) => {
		currTabIndex.value = index;
	}
	const dataList = [
	    {
	        text: 'Sharing',
	        iconSrc: '/static/images/icons/share.png'
	    },
	    {
	        text: 'Setting',
	        iconSrc: '/static/images/icons/setting.png'
	    }
	]
	const popupHandle = (result,result1 = '')=> {
		console.log(result,result1.split('-')[1])
		if(result.text === dataList[1].text){
			uni.navigateTo({
				url: '/pages/index/device-setting/index'
			});
		}
	}
	const play = () => {
		uni.navigateTo({
			url: '/pages/index/demo3'
		});
		// uni.navigateTo({
		// 	url: '/pages/index/device-view/index'
		// });
	}
</script>
<style lang="scss">
    .item {
        display: flex;
        height: 100px;
        align-items: center;
        justify-content: center;
        .flex-line {
            display: inline-flex;
            border: 1rpx solid #ccc;
            padding: 10rpx;

        }
    }
    .flex-btn {
        position: fixed;
        top: 20px;
        right:20px;
        display: inline-flex;
    }
</style>
<style lang="scss" scoped>
	.index-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		top: calc(43.81rpx * 2 + 20rpx + var(--status-bar-height));
		padding-left: 35rpx;
		padding-right: 35rpx;
	}

	// .uni-page-head {
	// 	position: fixed;
	// 	left: var(--window-left);
	// 	right: var(--window-right);
	// 	height: 160rpx;
	// 	height: calc(160rpx + constant(safe-area-inset-top));
	// 	height: calc(160rpx + env(safe-area-inset-top));
	// 	padding: 7px 3px;
	// 	padding-top: calc(7px + constant(safe-area-inset-top));
	// 	padding-top: calc(7px + env(safe-area-inset-top));
	// 	display: flex;
	// 	overflow: hidden;
	// 	justify-content: space-between;
	// 	box-sizing: border-box;
	// 	z-index: 998;
	// 	color: #fff;
	// 	background-color: transparent;
	// 	transition-property: all;
	// 	align-items: center;
	// 	padding-left: 35rpx;
	// 	padding-right: 35rpx;
	// }
	

	.cus-tabs {
		display: flex;
		// margin-top: 10px;
		justify-content: flex-start;
		align-items: center;
		height: 67rpx;
		width: 100vw;
		font-size: 28rpx;

		.cus-tab {
			margin: 0 75rpx 0 0;
			font-weight: 400;

			&.curr {
				font-weight: 600;
				color: #FE0000;
				position: relative;

				&::after {
					content: " ";
					width: 13rpx;
					height: 13rpx;
					border-radius: 50%;
					background-color: #FE0000;
					display: block;
					position: absolute;
					left: 48.5%;
					margin-top: 15rpx;
				}
			}
		}
	}

	.list-items {
		height: calc(100vh - var(--status-bar-height) - 160rpx - 67rpx - 14px - 38rpx);
		height: calc(100vh - var(--status-bar-height) - 160rpx - 67rpx - 14px - 38rpx - constant(safe-area-inset-top));
		height: calc(100vh - var(--status-bar-height) - 160rpx - 67rpx - 14px - 38rpx - env(safe-area-inset-top));
		margin-top: 38rpx;

		.list-item-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, .32);
			flex-direction: column;

			&>img {
				width: 58.5rpx;
				height: 58.5rpx;
			}
			.time-disconnect {
				color: #fff;
				font-size: 24.53rpx;
			}
		}
	}

	.list-item {
		width: 680rpx;
		height: 468rpx;
		position: relative;
		border-radius: 24rpx;

		&:not(:last-child) {
			margin-bottom: 35rpx;
		}

		.list-item-img {
			width: 680rpx;
			height: 468rpx;
			border-radius: 24rpx;
		}

		.time-now {
			color: #fff;
			font-size: 24.53rpx;
			position: absolute;
			top: 20rpx;
			right: 23.36rpx;
			// z-index: 2;
		}

		.item-bottom {
			position: relative;
			width: 680rpx;
			bottom: 50rpx;
			padding: 28.62rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;

			// z-index: 2;
			.room-name {
				position: absolute;
				bottom: 30.37rpx;
				font-size: 24.53rpx;
			}

			.list-b-icon {
				position: absolute;
				bottom: 29.79rpx;
				width: 38.5rpx;
				height: 38.5rpx;
			}
		}
	}
</style>